<template>
  <el-aside width="220px" class="custom-aside">
    <div class="aside-header">
      <div class="logo-container">
        <img src="../assets/l.jpg" alt="心理咨询管理系统" class="logo">
        <h2>心理咨询管理系统</h2>
      </div>
    </div>

    <el-menu
      active-text-color="#4CAF50"
      background-color="transparent"
      text-color="#616161"
      router
      :default-active="activeMenu"
      class="custom-menu"
    >
      <el-menu-item
        :index="item.path"
        v-for="item in noChildren()"
        :key="item.path"
        class="menu-item"
      >
        <el-icon class="menu-icon">
          <component :is="item.icon" />
        </el-icon>
        <span>{{item.label}}</span>
      </el-menu-item>

      <el-sub-menu
        :index="item.path"
        v-for="item in hasChildren()"
        :key="item.path"
        class="sub-menu"
      >
        <template #title>
          <el-icon class="menu-icon">
            <component :is="item.icon" />
          </el-icon>
          <span>{{item.label}}</span>
        </template>
        <el-menu-item
          :index="subItem.path"
          v-for="(subItem, subIndex) in item.children"
          :key="subIndex"
          class="sub-menu-item"
        >
          <el-icon class="sub-menu-icon">
            <component :is="subItem.icon" />
          </el-icon>
          <span>{{subItem.label}}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import {
  HomeFilled,
  ChatDotRound,
  QuestionFilled,
  UserFilled,
  EditPen,
  Promotion,
  House,
  StarFilled,
  HelpFilled
} from '@element-plus/icons-vue';

// 获取本地存储中的角色信息
const role = localStorage.getItem('role');

// 定义不同角色的菜单列表
const frontdeskMenu = [
  {
    path: "/index",
    name: "index",
    label: "首页",
    icon: "HomeFilled",
  },
  {
    path: "/AppointmentView",
    name: "AppointmentView",
    label: "线上预约登记",
    icon: "ChatDotRound",
  },
  {
      path:"/noonline",
      name:"noonline",
      label:"线下预约管理",
      icon: "House",
  },
  {
    path: "/ConsultationManage",
    name: "ConsultationManage",
    label: "咨询过程管理",
    icon: "QuestionFilled",
  },
  {
      path:"/user/arrange",
      name:"arrange",
      label:"咨询安排表",
      icon: "TrendCharts",
  },
  {
    path: "/counselor/library",
    name: "counselor",
    label: "咨询师库",
    icon: "UserFilled",
  },
  {
    path: "/HealthValuation",
    name: "HealthValuation",
    label: "评估分诊",
    icon: "HelpFilled",
  },
];

const adminMenu = [
  {
    path: "/index",
    name: "index",
    label: "首页",
    icon: "HomeFilled",
  },
  {
      path: "/AppointmentView",
      name: "AppointmentView",
      label: "线上预约登记",
      icon: "ChatDotRound",
  },
  {
        path:"/noonline",
        name:"noonline",
        label:"线下预约管理",
        icon: "House",
  },
  {
      path: "/ConsultationManage",
      name: "ConsultationManage",
      label: "咨询过程管理",
      icon: "QuestionFilled",
  },
  {
      path:"/user/arrange",
      name:"arrange",
      label:"咨询安排表",
      icon: "TrendCharts",
  },
  {
      path: "/counselor/library",
      name: "counselor",
      label: "咨询师库",
      icon: "UserFilled",
  },
  {
      path: "/HealthValuation",
      name: "HealthValuation",
      label: "评估分诊",
      icon: "HelpFilled",
  },
  {
      path:"/assistantset",
      name:"assistantset",
      label:"助理设置",
      icon: "House",
  },
  {
      path:"/admin/echarts",
      name:"charts",
      label:"数据统计",
      icon: "PieChart",
  },
];

const teacherMenu = [
  {
    path: "/index",
    name: "index",
    label: "首页",
    icon: "HomeFilled",
  },
  {
    path: "/focusCases/Cases",
    name: "FocusCases",
    label: "重点关注个案",
    icon: "StarFilled",
  },
];

// 根据角色选择菜单列表
const list = computed(() => {
  switch (role) {
    case 'frontdesk':
      return frontdeskMenu;
    case 'admin':
      return adminMenu;
    case 'teacher':
      return teacherMenu;
    default:
      return [];
  }
});

const noChildren = () => {
  return list.value.filter(item => !item.children);
};

const hasChildren = () => {
  return list.value.filter(item => item.children);
};

const route = useRoute();
const activeMenu = computed(() => {
  const { meta, path } = route;
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
});
</script>

<style scoped lang="scss">
.custom-aside {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: 100vh;
  transition: all 0.3s ease;

  .aside-header {
    padding: 20px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    .logo-container {
      display: flex;
      flex-direction: column;
      align-items: center;

      .logo {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
        border-radius: 50%;
        object-fit: contain;
      }

      h2 {
        font-size: 16px;
        color: #4CAF50; /* 改为更鲜艳的绿色 */
        font-weight: 600;
        text-align: center;
        margin: 0;
      }
    }
  }

  .custom-menu {
    flex: 1;
    border-right: none;
    background-color: transparent !important;
    padding: 10px 0;

    .menu-item {
      margin: 5px 10px;
      border-radius: 8px;
      height: 48px;
      transition: all 0.3s ease;

      &:hover {
        background-color: rgba(76, 175, 80, 0.15) !important; /* 增加透明度使颜色更鲜艳 */

        .menu-icon {
          color: #4CAF50;
        }

        span {
          color: #2E7D32;
          font-weight: 500; /* 增加字体粗细 */
        }
      }

      &.is-active {
        background-color: rgba(76, 175, 80, 0.2) !important; /* 增加透明度使颜色更鲜艳 */

        .menu-icon {
          color: #4CAF50;
        }

        span {
          color: #2E7D32;
          font-weight: 600;
        }
      }
    }

    .sub-menu {
      margin: 5px 10px;

      :deep(.el-sub-menu__title) {
        border-radius: 8px;
        height: 48px;
        transition: all 0.3s ease;

        &:hover {
          background-color: rgba(76, 175, 80, 0.15) !important;

          .menu-icon {
            color: #4CAF50;
          }

          span {
            color: #2E7D32;
            font-weight: 500;
          }
        }
      }

      .sub-menu-item {
        margin-left: 20px;
        border-radius: 8px;
        height: 40px;
        transition: all 0.3s ease;

        &:hover {
          background-color: rgba(76, 175, 80, 0.15) !important;

          .sub-menu-icon {
            color: #4CAF50; /* 改为更鲜艳的绿色 */
          }

          span {
            color: #2E7D32;
            font-weight: 500;
          }
        }

        &.is-active {
          background-color: rgba(76, 175, 80, 0.2) !important;

          .sub-menu-icon {
            color: #4CAF50;
          }

          span {
            color: #2E7D32;
            font-weight: 600;
          }
        }
      }
    }

    .menu-icon {
      font-size: 18px;
      color: #4CAF50; /* 改为更鲜艳的绿色 */
      margin-right: 10px;
    }

    .sub-menu-icon {
      font-size: 16px;
      color: #4CAF50; /* 改为更鲜艳的绿色 */
      margin-right: 10px;
    }
  }
}
</style>